<template>
    <div class="message_layout">
        <ul class="w-full h-[84px] flex justify-between items-center bg-[#F5F6F8]" v-if="h_height == 'message'">
            <li v-for="(item, index) in top_list" :key="index" class="w-4/12 text-[#606163] text-[26px] flex items-center justify-center">{{ item }}</li>
        </ul>
        <div class=" pt-[32px]">
            <div :class="['overflow-y-auto','px-[28px]',h_height == 'message' ? 'ms_h' : 'lg_h']" >
                <PullRefresh v-model="listData.refreshing" @refresh="onRefresh">
                    <List v-model:loading="listData.loading" :finished="listData.finished" finished-text="没有更多了" @load="onLoad">
                        <TextItem v-for="item in listData.list" :key="item" :listItem="item" @click="()=>routerPath('detail',{type:h_height})"  />
                    </List>
                </PullRefresh>
            </div>
        </div>
    </div>
</template>
<script setup>
import TextItem from '@/components/text.vue';
import { PullRefresh, List } from 'vant';
import { reactive , ref,onMounted} from 'vue';
import router,{routerPath} from '../router';
const listData = reactive({
    finished: false,
    refreshing: false,
    loading: false,
    list: []
})
const top_list = ref(['近7天','近30天','近半年']);
const h_height = ref('');
const onLoad = () => {
    setTimeout(() => {
        if (listData.refreshing) {
            listData.list = [];
            listData.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
            listData.list.push({
                title: '关于举办山东省病案质量分析与编码实操质量分析与编码实操远程培训的通知',
                date: '2023-07-03  19:35:20    '
            });
        }
        listData.loading = false;

        if (listData.list.length >= 40) {
            listData.finished = true;
        }
    }, 1000);
};

// 清空列表数据
const onRefresh = () => {
    // 清空列表数据
    listData.finished = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    listData.loading = true;
    onLoad();
}

h_height.value = router.currentRoute.value.params.message

</script>


<style scoped lang="scss">
    .message_layout{
        ul{
            li{
                border-right: 1px solid #CCCCCC;
                &:last-of-type{
                    border: none;
                }
            }
        }
    }
    .ms_h{
        height:calc(100vh - 310px);
    }
    .lg_h{
        height:calc(100vh - 220px);
    }

</style>